<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useSkuInfo } from '@/stores/skuInfo';
import { useProductInfo } from '@/stores/productInfo';
import { useUserInfo } from '@/stores/userInfo';
import { onActivated, computed } from 'vue';
import { showToast } from 'vant';
import mitt from '@/utils/mitt';

const router = useRouter();
const skuInfo = useSkuInfo();
const productInfo = useProductInfo();
const userInfo = useUserInfo();

const myUserInfo = computed(() => userInfo.state);

onActivated(() => {
  // getUserInfo();
  mitt.emit('getUserInfo');
});

const addProduct = () => {
  if (myUserInfo.value.jifen < myUserInfo.value.needjifen) {
    showToast(myUserInfo.value.tips || '积分不足');
  } else {
    // 清除缓存
    skuInfo.clearSkuInfo();
    productInfo.clearProductForm();
    // 前往发布商品
    router.push('/hbMarket/productForm');
  }
};

// 我发布的
const toMyPosts = () => {
  sessionStorage.removeItem('mainScrollTop_myPosts');
  router.push('/hbMarket/myPosts');
};

// 我卖出的
const toMySales = () => {
  sessionStorage.removeItem('mainScrollTop_mySales');
  router.push('/hbMarket/mySales');
};

// 我买到的
const toMyPurchases = () => {
  sessionStorage.removeItem('mainScrollTop_myPurchases');
  router.push('/hbMarket/myPurchases');
};

const getBadge = (cnt: number) => {
  return cnt > 0 ? (cnt > 99 ? '99+' : cnt) : '';
};
</script>
<template>
  <div class="hbMarketMy">
    <div class="flex items-center px-6 pb-6">
      <van-image width="50" height="50" fit="cover" round :src="myUserInfo.headimg" />
      <div class="ml-5">
        <p>{{ myUserInfo.nickname }}</p>
        <p class="text-xs text-slate-800 mt-1">手机号：{{ myUserInfo.mobile }}</p>
      </div>
    </div>
    <div class="mx-3 bg-white rounded-md p-3 shadow">
      <p class="text-sm font-bold mb-2">我的交易</p>
      <div class="flex">
        <div class="flex flex-col items-center w-1/4" @click="toMyPosts">
          <van-icon size="26px" name="bag-o" :badge="getBadge(myUserInfo.pubcnt)" />
          <span class="text-xs mt-2">我发布的</span>
        </div>
        <div class="flex flex-col items-center w-1/4" @click="toMySales">
          <van-icon size="26px" name="gold-coin-o" :badge="getBadge(myUserInfo.salecnt)" />
          <span class="text-xs mt-2">我卖出的</span>
        </div>
        <div class="flex flex-col items-center w-1/4" @click="toMyPurchases">
          <van-icon size="26px" name="completed-o" :badge="getBadge(myUserInfo.buycnt)" />
          <span class="text-xs mt-2">我买到的</span>
        </div>
        <div
          v-if="myUserInfo.canshenhe"
          class="flex flex-col items-center w-1/4"
          @click="router.push('/hbMarket/productAudit')"
        >
          <van-icon size="26px" name="records-o" />
          <span class="text-xs mt-2">商品审核</span>
        </div>
      </div>
      <div class="mt-5">
        <van-button type="primary" block color="#EC2D69" @click="addProduct">发布商品</van-button>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.hbMarketMy {
  height: 100%;
  background: #fafafa;
  padding-top: 20px;
}
</style>
